<template>

    <div class="uploaderCenter">
        <img class="img" :src="defaultPicture">
    </div>
    <div style="padding-top: 8px"/>
    <van-row justify="center">
        <h3>"河大交友系统 —— 寻找志同道合的朋友"</h3>
    </van-row>
    <van-divider></van-divider>

    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <!--            用v-model实现界面和数据的双向绑定，界面上进行值的修改，该数据也会修改-->
            <van-field
                    v-model ="userAccount"
                    name="userAccount"
                    label="账号"
                    placeholder="账号至少为4位"
                    autocomplete="off"
                    :rules="[{ required: true, message: '请填写账号' }]"
            />
            <!--            type，声明类型，可以把密码变成*-->
            <van-field
                    v-model="userPassword"
                    type="password"
                    name="userPassword"
                    label="密码"
                    placeholder="密码至少为8位"
                    autocomplete="off"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
                    v-model="checkPassword"
                    type="password"
                    name="checkPassword"
                    label="确认密码"
                    placeholder="请重复输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
                    v-model="plantCode"
                    name="plantCode"
                    label="星球编号"
                    placeholder="请输入星球编号"
                    :rules="[{ required: true, message: '请填写星球编号' }]"
            />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                注册
            </van-button>
        </div>
    </van-form>
    <copyright/>
</template>

<script setup lang="ts">

    import {useRoute, useRouter} from "vue-router";
    import myAxios from "../plugin/myAxios";
    import {ref} from 'vue';
    import {showToast} from "vant/lib/vant.es";
    import {defaultPicture} from "../constants/teamStatusEnums";
    import Copyright from "../components/Copyright.vue";

    //这个能进行路径的跳转
    const router = useRouter();
    const route = useRoute();
    //    默认值都是空字符串
    const userAccount = ref('');
    const userPassword = ref('');
    const checkPassword = ref('');
    const plantCode = ref('');
    //当点击提交时，发送给后端
    const onSubmit = async () => {
        const res = await myAxios.post('/user/register',{
            userAccount: userAccount.value,
            userPassword: userPassword.value,
            checkPassword: checkPassword.value,
            planetCode: plantCode.value,
        })

        showToast(res, '用户登录');
        if (res.code === 0 && res.data >= 1){
            // Toast.success('登录成功');
            //    push：在当前的页面历史记录中又压入了一条新的记录，如果点后退，回到登录界面
            // replace:在当前的页面历史记录中替换掉当前的记录，再点后退就不会返回登录页了，而是返回登录页前的那一页
            showToast('注册成功,请登录！');

            window.location.href = '/user/login';
        }else {
            // Toast.fail('登录失败');
            showToast(res.description);
        }


    };

</script>

<style scoped>
    @import "../assets/css/public.css";

    .longin {
        margin: 5px 14px 0 14px;
    }

    .uploaderCenter {
        margin-top: 8px;
        display: flex;
        justify-content: center;
    }
</style>